<template lang="html">
  <div class="bor_bot mar_bot10"  v-if="objmarketing1.position2">
					<div class="glyx_box">
						<p class="title"><strong class="public"><i></i><em>攻略优选</em></strong>
						<a href="javascript:void(0);"><span>更多&nbsp;&nbsp;&gt;</span></a></p>
						<dl>
							<dt>
								<a>
								<div>
								<img :src="objmarketing1.position2[0].pic">
								<strong class="bac"></strong>
								<span class="pos">{{objmarketing1.position2[0].heading}}</span>
								</div></a>
							</dt>
							<dd>
								<a v-if="objmarketing1">
									<p>
										<img :src="objmarketing1.position2[1].pic" v-if="objmarketing1">
										<strong class="bac"></strong>
										<span class="pos">{{objmarketing1.position2[1].heading}}</span>
									</p>
								</a>
								<a  v-if="objmarketing1">
									<p>
										<img :src="objmarketing1.position2[2].pic">
										<strong class="bac"></strong>
										<span class="pos">{{objmarketing1.position2[2].heading}}</span>
									</p>
								</a>
							</dd>
						</dl>
					</div>
				</div>
</template>

<script>
export default {
  props:['objmarketing1']
}
</script>

<style lang="css" scoped>
.glyx_box {
    overflow: hidden;
    padding: 2% 0px 2% 2%;
    background: #fff;
    /*border-bottom: #d1d0d1 solid 1px;*/
}

.glyx_box p.title, .product_listbox p.title {
    display: block;
    overflow: hidden;
    padding: 2% 2% 2% 2%;
}
.relate_recommend p.title strong, .glyx_box p.title strong {
    display: block;
    width: 50%;
    font-weight: normal;
    float: left;
}
.glyx_box p.title strong.public i, .product_listbox p.title strong.public i {
    width: 5px;
    height: 20px;
    background: #ffaa01;
    border-radius: 5px;
    display: inline-block;
    float: left;
}
.glyx_box p.title strong.public em, .product_listbox p.title strong.public em {
    font-style: normal;
    color: #333;
    font-size: 16px;
    padding-left: 5px;
    display: inline-block;
    line-height: 20px;
    float: left;
}
.relate_recommend p.title span, .glyx_box p.title span {
    display: block;
    font-size: 14px;
    width: 40%;
    color: #10b5ed;
    float: right;
    padding-right: 2%;
    text-align: right;
}
.glyx_box dl {
    overflow: hidden;
}
.glyx_box dl dt {
    width: 98%;
    position: relative;
    margin-right: 2%;
}
.glyx_box dl dt img, .glyx_box dl dd p img {
    border-radius: 5px;
    border: none;
    vertical-align: middle;
    width: 100%;
}

.glyx_box dl dt strong.bac, .glyx_box dl dd p strong.bac, .glyx_box ul li strong.bac {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background: url(../../static/images/bla_bg.png) 0 0 repeat-x;
    height: 100%;
    border-radius: 5px;
}
.glyx_box dl dt span.pos, .glyx_box dl dd p span.pos, .glyx_box ul li span.pos {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    color: #fff;
    font-size: 14px;
    padding: 2%;
}
.glyx_box dl dd {
    padding: 2% 0px;
    overflow: hidden;
}
.glyx_box dl dd p {
    display: block;
    float: left;
    width: 48%;
    margin-right: 2%;
    position: relative;
}
.glyx_box dl dt span.pos{
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    color: #fff;
    font-size: 14px;
    padding: 2%;
}
</style>
